<template>
	<div>
		<router-link tag="div" to="/" class="header-abs" v-show="showabs">
			 <div class="iconfont header-abs—back">&#xe658;</div>
		</router-link>
		<!-- :style为动态改变样式 -->
		<div class="Header-fixed" 
		v-show="!showabs"
		:style='opacityStyle'>
			<router-link to="/">
				<div class="iconfont header-fixed-back">&#xe658;</div>
			</router-link>
			景点详情
		</div>
	</div>
</template>

<script>
export default{
	name:'DetailHeader',
	data () {
		return {
			showabs:true,
			opacityStyle:{
				opacity:0
			}
		}
	},
	methods:{
		handleScroll () {
			const top=document.documentElement.scrollTop
			if(top>60){
				let opacity=top/140
				opacity=opacity>1?1:opacity
				this.opacityStyle={
					opacity
				}
				this.showabs=false
			}else{
				this.showabs=true
			}
		}
	},
	activated() {
		//绑定一个scroll事件，一旦scroll事件执行，handleScroll事件将会执行
		window.addEventListener('scroll',this.handleScroll)
	},
	//全局事件的解绑
	deactivated() {
		window.addEventListener('scroll',this.handleScroll)
	}
}
</script>

<style lang='stylus' scoped>
	@import '~styles/varibles.styl'
	.header-abs
		position:absolute
		left:.2rem
		top:.2rem
		width:.8rem
		height:.8rem
		line-height:.8rem
		text-align:center
		border-radius: .4rem
		background:rgba(0,0,0,.8)
		.header-abs—back
			color:#FFFFFF
			font-size: .4rem
	.Header-fixed
		z-index:2
		position: fixed
		top:0
		left:0
		right:0
		height: .86rem
		line-height: .86rem
		text-align center
		color: #FFFFFF
		background: $bgcolor
		font-size: .32rem
		.header-fixed-back
			position:absolute
			top: 0
			left: 0
			width: .64rem
			font-size: .4rem
			text-align: center
			color: #fff
		
</style>
